<script setup lang="ts"></script>

<template>
  <div class="container">
    <div class="header"></div>
    <!-- 占位名字是header -->
    <slot name="header"></slot>
    <div class="body">
      <!-- 挖坑 -->
      <slot>
        <!-- 默认内容 当没有内容传入的时候生效  -->
        <h1>我是默认的</h1>
      </slot>
    </div>
    <div class="footer"></div>
    <slot name="footer"></slot>
  </div>
</template>

<style scoped>
.header,
.body,
.footer {
  width: 100%;
  height: 200px;
  background-color: aquamarine;
}

.body {
  height: 600px;
  background-color: blueviolet;
  /* overflow: hidden; */
  overflow-y: auto;
}
</style>
